<script setup>
import { ref, computed } from 'vue'
import { Input, Select, Button } from 'ant-design-vue'
import { SearchOutlined, FilterOutlined, ClearOutlined } from '@ant-design/icons-vue'

// Props 定义
const props = defineProps({
	// 搜索框占位符
	searchPlaceholder: {
		type: String,
		default: '搜索...',
	},
	// 分类选项
	categoryOptions: {
		type: Array,
		default: () => [],
	},
	// 评分选项
	ratingOptions: {
		type: Array,
		default: () => [],
	},
	// 是否显示评分筛选
	showRatingFilter: {
		type: Boolean,
		default: true,
	},
	// 自定义筛选项
	customFilters: {
		type: Array,
		default: () => [],
	},
})

// Emits 定义
const emit = defineEmits(['search', 'filter-change', 'clear'])

// 搜索和筛选状态
const searchText = ref('')
const selectedCategory = ref(null)
const selectedRating = ref(null)
const customFilterValues = ref({})

// 计算是否有筛选条件
const hasFilters = computed(() => {
	return (
		searchText.value ||
		selectedCategory.value !== null ||
		selectedRating.value !== null ||
		Object.values(customFilterValues.value).some(val => val !== null && val !== undefined)
	)
})

// 处理搜索
const handleSearch = () => {
	const filters = {
		searchText: searchText.value,
		category: selectedCategory.value,
		rating: selectedRating.value,
		...customFilterValues.value,
	}
	emit('search', filters)
	emit('filter-change', filters)
}

// 处理筛选变化
const handleFilterChange = () => {
	handleSearch()
}

// 清除所有筛选
const clearFilters = () => {
	searchText.value = ''
	selectedCategory.value = null
	selectedRating.value = null
	customFilterValues.value = {}

	const filters = {
		searchText: '',
		category: null,
		rating: null,
	}

	emit('clear', filters)
	emit('filter-change', filters)
}

// 监听搜索框变化
const onSearchChange = () => {
	handleFilterChange()
}

// 暴露方法给父组件使用
defineExpose({
	clearFilters,
	getFilters: () => ({
		searchText: searchText.value,
		category: selectedCategory.value,
		rating: selectedRating.value,
		...customFilterValues.value,
	}),
	// 设置搜索文本的方法，用于从URL参数接收搜索关键词
	setSearchText: (text) => {
		searchText.value = text
	}
})
</script>

<template>
	<div class="filter-search-container">
		<!-- 单行布局：搜索框和筛选区域 -->
		<div class="main-filter-row">
			<!-- 搜索框 -->
			<div class="search-section">
				<div class="search-input-wrapper">
					<div class="search-icon">
						<SearchOutlined />
					</div>
					<Input
						v-model:value="searchText"
						:placeholder="searchPlaceholder"
						size="large"
						class="search-input"
						@input="onSearchChange"
						@press-enter="handleSearch"
					/>
					<div
						v-if="searchText"
						class="clear-search"
						@click=";(searchText = ''), handleFilterChange()"
					>
						<ClearOutlined />
					</div>
				</div>
			</div>

			<!-- 筛选区域 -->
			<div class="filters-section">
				<div class="filter-icon">
					<FilterOutlined />
				</div>

				<div class="filters-wrapper">
					<!-- 分类筛选 -->
					<Select
						v-if="categoryOptions.length > 0"
						v-model:value="selectedCategory"
						placeholder="分类"
						size="large"
						class="filter-select"
						:options="categoryOptions"
						allow-clear
						@change="handleFilterChange"
					/>

					<!-- 评分筛选 -->
					<Select
						v-if="showRatingFilter && ratingOptions.length > 0"
						v-model:value="selectedRating"
						placeholder="评分"
						size="large"
						class="filter-select"
						:options="ratingOptions"
						allow-clear
						@change="handleFilterChange"
					/>

					<!-- 自定义筛选器 -->
					<template
						v-for="filter in customFilters"
						:key="filter.key"
					>
						<Select
							v-model:value="customFilterValues[filter.key]"
							:placeholder="filter.placeholder"
							size="large"
							class="filter-select"
							:options="filter.options"
							allow-clear
							@change="handleFilterChange"
						/>
					</template>

					<!-- 清除按钮 -->
					<Button
						v-if="hasFilters"
						type="text"
						size="large"
						class="clear-filters-btn"
						@click="clearFilters"
					>
						<ClearOutlined />
						<span>清除</span>
					</Button>
				</div>
			</div>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.filter-search-container {
	background: rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 16px;
	padding: 6px;
	margin-bottom: 24px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

// 主要筛选行：搜索框和筛选在同一行
.main-filter-row {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

// 搜索区域
.search-section {
	flex: 1;
	min-width: 280px;
}

.search-input-wrapper {
	position: relative;
	display: flex;
	align-items: center;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(8px);
	border-radius: 12px;
	border: 2px solid rgba(255, 255, 255, 0.3);
	transition: all 0.3s ease;
	overflow: hidden;

	&:hover {
		border-color: rgba(102, 126, 234, 0.5);
	}

	&:focus-within {
		border-color: rgba(102, 126, 234, 0.8);
		box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
	}
}

.search-icon {
	padding: 0 16px;
	color: #999;
	font-size: 16px;
	display: flex;
	align-items: center;
}

.search-input {
	flex: 1;
	border: none !important;
	background: transparent !important;
	box-shadow: none !important;
	font-size: 16px;

	:deep(.ant-input) {
		border: none !important;
		background: transparent !important;
		box-shadow: none !important;

		&:focus {
			border: none !important;
			box-shadow: none !important;
		}
	}
}

.clear-search {
	padding: 0 16px;
	color: #999;
	cursor: pointer;
	display: flex;
	align-items: center;
	transition: color 0.3s ease;

	&:hover {
		color: #666;
	}
}

// 筛选区域
.filters-section {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	flex-shrink: 0;
}

.filter-icon {
	color: #667eea;
	font-size: 16px;
	margin-right: 4px;
}

.filters-wrapper {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	flex: 1;
}

.filter-select {
	min-width: 120px;

	:deep(.ant-select-selector) {
		background: rgba(255, 255, 255, 0.8) !important;
		border: 1px solid rgba(255, 255, 255, 0.3) !important;
		border-radius: 8px !important;
		backdrop-filter: blur(4px);
		transition: all 0.3s ease;

		&:hover {
			border-color: rgba(102, 126, 234, 0.5) !important;
		}
	}

	:deep(.ant-select-focused .ant-select-selector) {
		border-color: rgba(102, 126, 234, 0.8) !important;
		box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.1) !important;
	}
}

.clear-filters-btn {
	display: flex;
	align-items: center;
	gap: 4px;
	color: #999;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(4px);
	transition: all 0.3s ease;

	&:hover {
		color: #667eea !important;
		background: rgba(255, 255, 255, 0.8) !important;
	}

	span {
		font-size: 14px;
	}
}

// 响应式设计
@media (max-width: 768px) {
	.filter-search-container {
		padding: 16px;
		border-radius: 12px;
	}

	.main-filter-row {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.search-section {
		min-width: auto;
		width: 100%;
	}

	.filters-section {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.filter-icon {
		display: none;
	}

	.filters-wrapper {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
	}

	.filter-select {
		min-width: auto;
		width: 100%;
	}

	.clear-filters-btn {
		justify-content: center;
	}
}
</style>
